feat(FR-2890): speed up Vite dev server for remote sessions#7405
Merged
yomybaby merged 1 commit intoMay 13, 2026
Merged
Conversation
Member
Author
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has required the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Contributor
Coverage Report for root-coverage
File CoverageNo changed files found. |
Contributor
Coverage Report for react-coverage (./react)
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||
Contributor
There was a problem hiding this comment.
Pull request overview
This PR aims to improve the developer experience for remote Vite dev sessions by reducing network transfer size and pre-transforming critical-path modules so first paint is faster and less RTT-bound.
Changes:
- Add a dev-server compression middleware plugin to gzip dev responses (
react/vite.config.ts). - Pre-declare heavy first-paint dependencies and configure
server.warmup.clientFilesfor first-paint modules (react/vite.config.ts). - Add a verification step to ensure warmup file paths actually exist (
scripts/verify.sh), and update DiceBear usage/deps for identicons.
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| scripts/verify.sh | Adds a check to validate server.warmup.clientFiles paths exist, wired into the verify script. |
| react/vite.config.ts | Adds dev compression middleware, optimizeDeps include list, and server warmup list for first-paint modules. |
| react/src/components/VFolderNodeIdenticon.tsx | Switches DiceBear shapes import source (needs adjustment for correctness). |
| react/src/components/VFolderNodeIdenticonV2.tsx | Switches DiceBear shapes import source (needs adjustment for correctness). |
| react/package.json | Adds compression, @types/compression, and @dicebear/shapes. |
| pnpm-lock.yaml | Lockfile updates corresponding to dependency changes. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
e2fcbba to
bb1d07f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

Resolves #7404 (FR-2890)
Summary
Reduces slowest hard-refresh request on a remote dev session from ~12 s to ~3 s. Each change targets a different bottleneck identified by directly measuring response patterns on a remote browser session.
server.warmup.clientFiles(react/vite.config.ts) — pre-transforms the first-paint module set (entry → App → routes + eagerly-imported components/pages + BUI barrel) at startup, so the browser fetches them from Vite's in-memory cache instead of paying transform cost on the wire.optimizeDeps.include(react/vite.config.ts) — pre-declares the heavy top-level deps used on the first-paint path (antd, react-relay, dayjs, nuqs, lodash, etc.) so the dep optimizer pre-bundles them at startup in parallel with the source scan. Avoids mid-session optimizer reloads.react/vite.config.ts+compressiondep) — Vite dev does not compress responses by default. Aggregate session payload (~30 MB raw on this app) saturates WAN throughput and pulls every parallel HTTP/2 stream completion toward the sametotal_bytes / bandwidthvalue — exactly the "every chunk takes ~8 s regardless of size" pattern observed in the network panel. Compression drops aggregate wire bytes by ~80 % (gzip) / ~82 % (brotli q4, the package default).@dicebear/collection→@dicebear/shapes(VFolderNodeIdenticon[V2].tsx+react/package.json) —collectionis a barrel re-exporting all 30 avatar styles. We use onlyshapes. Direct sub-package import removes a 620 KB compressed chunk from dev. Likely also benefits prod —@dicebear/shapessub-package does not declaresideEffects: false, so Rollup may conservatively keep the namespace re-exports even thoughcollectionitself is marked side-effect-free.scripts/verify.sh— adds aVite warmup pathscheck that surfaces any warmupclientFilesentry that no longer exists on disk (after a refactor / rename), so silent "Pre-transform error" warnings don't accumulate.Compression knob exploration
The
compressionpackage default (brotli quality 4) is intentional. Tried alternatives on a real remote dev session:UV_THREADPOOL_SIZE=12q4 default stays — q6 needs a 3× larger thread pool just to break even, and offers no benefit when it does.
UV_THREADPOOL_SIZEis a process env that can't be set fromvite.config.tscleanly anyway.Test plan
Content-Encoding: br(orgzip) on dep bundle responses (DevTools → Network → headers).bash scripts/verify.shshows--- Vite warmup paths: PASS ---.Measurements (remote session, this branch)